<template>
    <div class="containerBox editForm">
        <easyForm :fieldList="fieldList" :model="model" :options="options" @submit="search">
                
        </easyForm>
        <div class="clearfix">
            <div class="el-form-item__label normalLabel">设置可服务时段:
                <span class="bottomFixd"><el-button type="primary" link @click="addTimed()">添加时段</el-button></span>
            </div>
            <ul class="clearfix">
                <li class="liItem clearfix" v-for="(item,index) in timeD" :key="item.id">
                    <el-icon color="#f29696" size="22" @click="removeNowLi(index,item)" class="rightIcon cursorPointer leftFloat"><Remove /></el-icon>
                    <p class="timeItem leftFloat">{{item.time}} <el-icon class="rightFloat rightIcon" color="#dcdfe6" :size="18"><Timer /></el-icon></p>
                </li>
            </ul>
        </div>
        

    </div>
    
    <el-dialog v-model="addTimedFlag" title="新增时段" center>
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >上午（00:00 - 13:00）</el-checkbox
        >
        <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
        >
            <el-checkbox v-for="item in timeD" :key="item.id" :label="item.time">
                <p class="timeItem leftFloat">{{item.time}} <el-icon class="rightFloat rightIcon" color="#dcdfe6" :size="18"><Timer /></el-icon></p>
            </el-checkbox>
        </el-checkbox-group>
        <el-divider />
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >下午（13:00 - 19:00）</el-checkbox
        >
        <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
        >
            <el-checkbox v-for="item in timeD" :key="item.id" :label="item.time">
                <p class="timeItem leftFloat">{{item.time}} <el-icon class="rightFloat rightIcon" color="#dcdfe6" :size="18"><Timer /></el-icon></p>
            </el-checkbox>
        </el-checkbox-group>
        <el-divider />
        <el-checkbox
            v-model="checkAll"
            :indeterminate="isIndeterminate"
            @change="handleCheckAllChange"
            >晚间（19:00 - 24:00）</el-checkbox
        >
        <el-checkbox-group
            v-model="checkedCities"
            @change="handleCheckedCitiesChange"
        >
            <el-checkbox v-for="item in timeD" :key="item.id" :label="item.time">
                <p class="timeItem leftFloat">{{item.time}} <el-icon class="rightFloat rightIcon" color="#dcdfe6" :size="18"><Timer /></el-icon></p>
            </el-checkbox>
        </el-checkbox-group>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="addTimedFlag = false">取消</el-button>
                <el-button type="primary" @click="addTimedFlag = false">确定</el-button>
            </span>
        </template>
    </el-dialog>
  
</template>

<script lang="ts" setup>

import { ref , reactive, watch} from 'vue'
import { ElMessageBox, FormInstance } from 'element-plus'
import easyForm from '@/components/formItem/index.vue'
import { onBeforeRouteLeave } from 'vue-router';

const formList = {
    base: [
        { label: '来访者至少提前多久可预约:',   field: 'advanceReservation', type:'select' ,options: { 
            data: [{ label: '可预约当天', value: 1 }, 
                { label: '可提前24小时预约', value: 2 },
                { label: '可提前48小时预约', value: 3 },
                { label: '可提前72小时预约', value: 4 },] }},
        { label: '来访者至少提前多久可取消（更改）预约:',   field: 'changeReservation', type:'select' ,options: { 
            data: [{ label: '任意时间', value: 1 }, 
                { label: '至少提前12小时取消（改约）', value: 2 },
                { label: '至少提前24小时取消（改约）', value: 3 },
                { label: '至少提前48小时取消（改约）', value: 4 },
                { label: '至少提前72小时取消（改约）', value: 5 },] }},
        { label: '机构用户主页可预约时间:',   field: 'date', type:'select' ,options: { 
            data: [{ label: '一周', value: 1 }, 
                { label: '两周', value: 2 },
                { label: '三周', value: 3 },
                { label: '四周', value: 4 },] }},
    ],
}
const fieldList: Form.FieldItem[] = formList.base;
const options = {
    labelPosition: 'right',
    disabled: false,
    submitButtonText: '保存',
    showSubmitButton:true,
    
};

// 搜索参数配置 使用form组件
const model = ref<Record<string, any>>({
        labelWidth:"280px",
        inlineFlag:false,
        advanceReservation: 0,
        changeReservation: 0,
        date:0
    })
// 选中的时段
const timeD = ref([{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]);
// 待选中时段
const timeT = ref([{time:'00:10 - 00:30'},{time:'00:20 - 00:30'},{time:'00:30 - 00:30'},{time:'00:40 - 00:30'},{time:'00:50 - 00:30'},
{time:'06:00 - 00:30'},{time:'00:70 - 00:30'},{time:'00:80 - 00:30'},{time:'00:90 - 00:30'}]);

// 删除当前点击
const removeNowLi =  (index: number, item: any) => {
    console.log(item)
    timeD.value.splice(index,1)
}
// 添加时段
const addTimedFlag = ref(false)
const addTimed = () => {
    addTimedFlag.value = true
}

// 
const checkAll = ref(false)
const isIndeterminate = ref(true)
const checkedCities = ref(['Shanghai', 'Beijing'])
const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']

const handleCheckAllChange = (val: boolean) => {
  checkedCities.value = val ? cities : []
  isIndeterminate.value = false
}
const handleCheckedCitiesChange = (value: string[]) => {
  const checkedCount = value.length
  checkAll.value = checkedCount === cities.length
  isIndeterminate.value = checkedCount > 0 && checkedCount < cities.length
}


const editFlag = ref(false);
watch(model.value, (newVal, oldVal) => {
    console.log(model.value)
    editFlag.value = true
})

onBeforeRouteLeave((to, from, next) => {
    if(editFlag.value){
        ElMessageBox.confirm(
        '当前页面修改数据为保存，确定离开吗?',
        '温馨提示',
        {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        }
    )
        .then(() => {
            next()
        })
        .catch(() => {
            return false;
        })
    }else{
        next()
    }
})
</script>

<style scoped lang="scss">
.containerBox{
    width: calc(100% - 20px);
    box-sizing: border-box;
    margin: 10px;
    padding: 40px 40px 10px 10px;
    border-radius: 4px;
    border: 1px solid #efefef;
    box-shadow: 0 0 10px #999!important;
    .normalLabel{
        width: 280px;
        text-align: right;
        color: #606266;
        font-size: 14px;
        float: left;
        position: relative;
        .bottomFixd{
            position: absolute;
            top: 20px;
        }
    }
    ul{
        float: left;
        width: calc(100% - 280px);
        
        .liItem{
            width: 190px;
            line-height: 32px;
            float: left;
            margin-right: 20px;
            font-size: 14px;
            margin-bottom: 10px;
        }
        .timeItem{        
            width: 150px;
            border: 1px solid #dcdfe6;
            border-radius: 4px;
            text-indent: 10px;
        }
        .rightIcon{
            margin-top: 6px;
            margin-right: 8px;
        }
    }
}
</style>